<template>
    <div id="content">
        <Row :gutter="16" style="height:100hv;margin:20px 0">
            <Col span="19">
                <Breadcrumb style=" line-height: 32px">
                    您所在的位置:
                    <BreadcrumbItem v-for="item in levelList" :key="item.path" :to="item.path">
                        <span>{{item.meta.Title}}</span>
                    </BreadcrumbItem>
                </Breadcrumb>
            </Col>
            <Col span="5" style="padding-right: 0;padding-left:12px;">
            <Input  placeholder="请输入关键词" search @on-search="searchAll"/>
            </Col>
        </Row>
        <Row :gutter="16" style="height:100hv">
            <Col span="19">
            <Card :bordered="false">
                <router-view></router-view>
            </Card>
            </Col>
            <Col span="5">
            <com-sider>

            </com-sider>
            </Col>
        </Row>
    </div>
</template>

<script>
    import comSider from './Sider.vue'
    export default {
        components: {
            comSider,
        },
        data() {
            return {
                levelList: [],
            }
        },
        computed:{
            publicState() {
                return this.$store.state.projectState
            }
        },
        watch: {
            "$route"(to,from) {
                this.getBreadcrumb()
                // this.$router.go(0);
            },
            // 公示状态
            publicState() {
                this.getBreadcrumb()
            }
        },
        created() {
            this.getBreadcrumb()
        },
        methods: {
            getBreadcrumb() {
                // console.log(this.$route)
                let matched = this.$route.matched.filter(item => item.Name)
                matched = matched.slice(1)
                // console.log(111111)
                // console.log(matched)
                const first = matched[0];
                // console.log(2222)
                // console.log(first)
                if (first && first.name.trim().toLocaleLowerCase() !== 'HomePublic'.toLocaleLowerCase()) {
                    matched = [
                        {
                        path: '/home/HomePublic',
                        meta: {
                            title: '环保公示首页'
                        }
                    }
                    ].concat(matched)
                    if(first && first.name.trim().toLocaleLowerCase() == 'PublicDetials'.toLocaleLowerCase()) {
                        var title,path;
                        if(this.publicState == 0) {
                            path = '/home/OnePublicList'
                            title = '一次公示'
                        }else if(this.publicState == 1){
                            path = '/home/TwoPublicList'
                            title = '二次公示'
                        }else if(this.publicState == 2){
                            path = '/home/CheckPublicList'
                            title = '验收公示'
                        }else if(this.publicState == 3){
                            path = '/home/AllPublicList'
                            title = '全本公示'
                        }else if(this.publicState == 4){
                            path = '/home/OtherPublicList'
                            title = '其它公示'
                        }
                        matched.splice(1,0 ,{
                            path: path,
                            meta: {
                                title: title
                            }
                        })
                    }
                }
                if(first && first.name.trim().toLocaleLowerCase() == 'SearchPublic'.toLocaleLowerCase()) {
                    matched = []
                }
                //  console.log(matched)
                this.levelList = matched
            },
            // 搜索
            searchAll(e) {
                this.$store.commit('searchName',e)
                this.$router.push({name: 'SearchPublic'});
            }
        }
    }
</script>

<style lang="less">
    #content {
        .ivu-card-body {
            padding: 0;
        }
        .ivu-breadcrumb a {
            color: #2996FF;
            transition: color .2s ease-in-out;
        }
    }
</style>
